<template>
  <!-- 患者特有字段 -->
  <view class="patient-fields">
    <view class="input-group">
      <view class="input-label">年龄</view>
      <input class="input" type="number" :value="patientAge" @input="onAgeChange" placeholder="请输入年龄" maxlength="3" />
    </view>
    
    <view class="input-group">
      <view class="input-label">性别</view>
      <radio-group class="gender-radio-group" @change="onGenderChange">
        <label class="gender-radio"><radio value="male" :checked="patientGender === 'male'" /> 男</label>
        <label class="gender-radio"><radio value="female" :checked="patientGender === 'female'" /> 女</label>
      </radio-group>
    </view>
    
    <view class="input-group">
        <view class="input-label">身份证号</view>
        <input class="input" type="text" :value="idCard" @input="onIdCardChange" placeholder="请输入身份证号" maxlength="18" />
      </view>
  </view>
</template>

<script>
export default {
  name: 'PatientForm',
  props: {
    idCard: {
      type: String,
      default: ''
    },
    patientAge: {
      type: Number,
      default: 0
    },
    patientGender: {
      type: String,
      default: 'male'
    }
  },
  methods: {
    onGenderChange(e) {
      this.$emit('gender-change', e.detail.value);
    },
    onIdCardChange(e) {
      this.$emit('update:idCard', e.detail.value);
    },
    onAgeChange(e) {
      this.$emit('update:patientAge', Number(e.detail.value));
    }
  }
};
</script>

<style scoped>
.patient-fields {
  padding: 10rpx 0;
}

.gender-radio-group {
  display: flex;
  width: 100%;
  justify-content: space-around;
  padding: 20rpx 0;
}

.gender-radio {
  display: flex;
  align-items: center;
}

.gender-radio radio {
  margin-right: 10rpx;
}
</style>